import React from 'react';
import BookmarkCard from './BookmarkCard';
import { Bookmark, Category } from '../../types';

interface BookmarkGridProps {
  bookmarks: Bookmark[];
  categories: Category[];
  loading: boolean;
}

const BookmarkGrid: React.FC<BookmarkGridProps> = ({ bookmarks, categories, loading }) => {
  if (loading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
      </div>
    );
  }

  if (!bookmarks.length) {
    return (
      <div className="flex flex-col items-center justify-center h-64 text-gray-500">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-16 w-16 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z" />
        </svg>
        <p>未找到书签</p>
        <p className="text-sm mt-1">尝试调整筛选条件或清除搜索</p>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
      {bookmarks.map((bookmark) => (
        <BookmarkCard 
          key={bookmark.id} 
          bookmark={bookmark} 
          categories={categories}
        />
      ))}
    </div>
  );
};

export default BookmarkGrid; 